<template>
  <div class="chat-wrap">
    <div
      v-for="item in $store.state.messages"
      :is="typeTo(item.type)"
      :key="item.msgID"
      :msgData="item"
    ></div>
  </div>
</template>

<script>
import Text from "@/components/MessageTypes/Text";
import Time from "@/components/MessageTypes/Time";
import RedEnv from "@/components/MessageTypes/RedEnv";
import RedEnvReceive from "@/components/MessageTypes/RedEnvReceive";
import Money from "@/components/MessageTypes/Money";
export default {
  data() {
    return {};
  },
  methods: {},
  components: {
    "msg-text": Text,
    "msg-time": Time,
    "msg-redenv": RedEnv,
    "msg-redenv-receive": RedEnvReceive,
    "msg-money": Money,
  },
  computed: {
    typeTo() {
      return function (type) {
        let map = {
          文本: "msg-text",
          时间: "msg-time",
          转账: "msg-money",
          红包: "msg-redenv",
          "领取红包": "msg-redenv-receive",
        };
        return map[type];
      };
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.chat-wrap {
  position: relative;
  width: 100%;
  // height: 670px;
  background-color: rgb(237, 237, 237);
  overflow: scroll;
  flex-grow: 1;
  &::-webkit-scrollbar {
    width: 0 !important ;
    height: 0;
  }
}
</style>